<!DOCTYPE html>
<html>
<head>
    <title>FlinkCDC</title>
    <!--路径中的第一个/不要丢掉，否则无法找到文件-->
    <link rel="stylesheet" href="/themes/default/easyui.css">
    <link rel="stylesheet" href="/themes/icon.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js" ></script>
</head>
<body>
    <table class="easyui-datagrid" id="taskGrid">
    </table>
</body>

<script type="text/javascript">
    let taskData = [
        <#list taskList as task>
        {
            name: '${task.name}',
            jobId: '${task.jobId!}',
            statusDesc: '${task.statusDesc!}',
            mark: '${task.mark!}',
            status: '${task.status!}',
        },
        </#list>
    ];
    function editCol(value, row, index) {
        if ('running' == value) {
            return "<a href='javascript:updateTask(" + index + ")'>关闭</a>";
        } else {
            return "<a href='javascript:updateTask(" + index + ")'>启动</a>";
        }
    }
    function updateTask(row) {
        $.messager.confirm('确认','确认？',function(r){
            if (r){
                $.ajax({
                    type: "POST",
                    datatype: "json",
                    url: "/updateTask",
                    data: JSON.stringify(taskData[row]),
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        window.location.reload();
                    },
                    error: function (selcolumnValuelist) {
                        alert("请求错误:" + selcolumnValuelist)
                    }
                });
            }
        });
    }

    $('#taskGrid').datagrid({
        singleSelect:true,
        data: taskData,
        columns:[[
            {field:'name',title:'任务名',width:100},
            {field:'jobId',title:'FlinkJobId',width:300},
            {field:'statusDesc',title:'状态',width:150},
            {field:'mark',title:'信息',width:300},
            {field:'status', title:'操作',width:150, formatter: editCol}
        ]]

    });

</script>
</html>
